<template>
	<view class="root">
		<view class="bgc-fff" :style="{ paddingTop: `${statusBarHeight}px` }">
			<view class="relative mt-50">
				<view
					@click="getUserProfile"
					hover-class="tap-hover"
					class="as-center ai-center mt-30"
				>
					<image
						:style="{
							boxShadow: `0 0 8rpx #888`,
							height: `130rpx`,
							width: `130rpx`,
						}"
						class="br-circle"
						:src="userProfile.avatarUrl"
						mode="aspectFill"
					/>
					<text class="fs-30 lh-3">
						{{ userProfile.nickName || "授权信息" }}
					</text>
				</view>

				<button
					v-if="!userProfile.phoneNumber"
					:style="{
						borderRadius: `30rpx 0 0 30rpx`,
						transform: `translateY(-50%)`,
					}"
					open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber"
					class="absolute bgc-20283e color-fff right-0 top-80 fs-28 lh-2"
					hover-class="tap-hover"
				>
					绑定手机号
				</button>
			</view>

			<view class="fd-row mt-30 ml-24 mr-24 mb-30">
				<view class="f1 ai-center">
					<text class="fs-28 color-333 text-center lh-60">
						{{ userProfile.money }}
					</text>
					<text class="fs-26 color-999 mt-12">余额</text>
				</view>
				<navigator url="/pages/client/Wallet" hover-class="tap-hover" class="f1 ai-center">
					<image
						class="width-60 height-60"
						src="/static/img/icon-wallet.png"
						mode="aspectFit"
					/>
					<text class="fs-26 color-999 mt-12">钱包</text>
				</navigator>
			</view>
		</view>

		<view :style="{ padding: `30rpx` }" class="bgc-fff mt-12">
			<view class="fd-row jc-sb ai-center lh-2">
				<text class="color-333 fs-32">我的订单</text>
				<navigator
					hover-class="tap-hover"
					class="fd-row color-999 fs-26 ai-center"
					url="/pages/client/Order?tab=-1"
				>
					<text>全部订单</text>
					<uni-icons color="#999" size="15" type="arrowright" />
				</navigator>
			</view>

			<view class="fd-row mt-30">
				<navigator
					v-for="(status, index) in orderStatus"
					:key="status.key"
					:url="`/pages/client/Order?tab=${index}`"
					class="ai-center f1"
					hover-class="tap-hover"
					hover-stay-time="50"
				>
					<image
						class="width-54 height-54"
						:src="`/static/img/order-${status.key}.png`"
						mode="aspectFit"
					/>
					<text class="fs-24 color-999 mt-12">{{ status.text }}</text>
				</navigator>
			</view>
		</view>

		<navigator
			v-if="Number(userProfile.group_id) === 2"
			url="/pages/businessBackground/Index"
			class="fd-row jc-sb bgc-fff mt-12"
			:style="{ padding: `30rpx` }"
		>
			<text class="color-333 fs-32">商家后台</text>
			<label>
				<text class="color-999 fs-26">进入</text>
				<uni-icons color="#999" size="15" type="arrowright" />
			</label>
		</navigator>
		<view
			v-if="Object.values(services).length"
			:style="{ padding: `30rpx` }"
			class="bgc-fff mt-12"
		>
			<text class="color-333 fs-32">我的服务</text>

			<view class="fd-row mt-30 flex-wrap">
				<view
					v-for="(service, key) in services"
					:key="key"
					@click="serve(key)"
					:style="{ width: `25%`, margin: `12rpx 0` }"
					class="ai-center"
					hover-class="tap-hover"
					hover-stay-time="50"
				>
					<image
						class="bgc-eee br-circle"
						:style="{ width: `90rpx`, height: `90rpx` }"
						:src="`/static/img/icon-${key}.png`"
						mode="aspectFit"
					/>
					<text class="color-666 fs-26 mt-12 text-center">{{ service }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import { Storage } from "@/static/libs/utils";

	@Component({ components: { uniIcons } })
	export default class Mine extends Vue {
		// component property
		statusBarHeight: number = uni.getSystemInfoSync().statusBarHeight;
		userProfile: AnyObject = {
			avatarUrl: "",
			nickName: "",
			phoneNumber: "",
			money: "0.00",
		};

		orderStatus: { key: string; text: string }[] = [
			{ key: "waiting", text: "待付款" },
			{ key: "active", text: "活动中" },
			{ key: "completed", text: "已完成" },
			{ key: "canceled", text: "已取消" },
		];

		public get services(): AnyObject {
			const options: AnyObject = {
				rewardWithdrawal: "赏金提现",
				makeApplets: "制作小程序",
			};

			return options;
		}
		onShow() {
			this.getUserInfo();
		}

		serve(key: string) {
			switch (key) {
				case "rewardWithdrawal":
					uni.navigateTo({ url: "/pages/client/RewardWithdrawal" });
					break;
				case "makeApplets":
					uni.navigateTo({ url: "/pages/client/MakeApplets" });
					break;
				default:
					break;
			}
		}

		getUserProfile() {
			if (this.userProfile.nickName) return;
			wx.getUserProfile({
				desc: "更新用户信息",
				success: async ({ userInfo }) => {
					await this.$request.get("/user/upMsg", userInfo);
					this.getUserInfo();
				},
			});
		}
		getUserInfo() {
			uni.showLoading({ title: "Loading...", mask: true });
			this.$request.get("/user/getUserInfo_V2").then(({ data }) => {
				this.userProfile = Storage.set("authorizationInfo", data);
				uni.hideLoading();
			});
		}
		async getPhoneNumber({ detail }: AnyObject) {
			const [loginFail, loginRes]: any = await uni.login({});

			if (loginFail) {
				uni.showToast({ title: loginFail.errMsg, icon: "none" });
				return Promise.reject(loginFail.errMsg);
			}

			if (!detail.encryptedData) {
				uni.showToast({ title: "获取手机号失败", icon: "none" });
				return;
			}

			await this.$request.get("/user/getPhone", {
				...detail,
				code: loginRes.code,
			});
			this.getUserInfo();
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>